<template>
  <div class="myContainer">
    <el-row>
      <el-col :span="24">
        <div class="myHeadeTitle">基本信息</div>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        类型名称 :
      </el-col>
      <el-col :span="10">
        <el-input placeholder="类型名称" v-model="repair_type_name"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        类型编号 :
      </el-col>
      <el-col :span="10">
        <el-input placeholder="类型编号" v-model="repair_type_code"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        类型说明 :
      </el-col>
      <el-col :span="10">
        <el-input type="textarea" placeholder="类型说明" v-model="repair_type_desc"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="24">
        <div class="myHeadeTitle">报修项目</div>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        报修项目:
      </el-col>
      <el-col :span="21">
        <el-button class="myBgGreen" @click="onAdd"> 新 增 </el-button>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="24">
        <template>
          <el-table
            :loading="loading"
            :data="subjectList"
            stripe
            border
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="subject_name"
              label="项目名称">
            </el-table-column>
            <el-table-column
              prop="subject_code"
              label="项目编码">
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格">
            </el-table-column>
            <el-table-column
              prop="subject_desc"
              label="项目描述">
            </el-table-column>
            <el-table-column
              label="缩略图">
              <template scope="scope">
                <a :href='scope.row.url' target="_blank">
                  <img :src='scope.row.url' width="50" height="50"/>
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template scope="scope">
                <el-button class="look" type="text" size="small" @click="onOpenUpdateDialog(scope.row.subject_id)">编辑</el-button> |
                <el-button class="look" type="text" size="small" @click="onDeleteRepairItem(scope.row.subject_id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="20" :offset="3">
        <el-button class="myBgGreen" v-if="type=='update'" @click="onUpdate">保 存</el-button>
        <el-button class="myBgGreen"  v-if="type=='update'" @click="onClose">关 闭</el-button>
      </el-col>
    </el-row>

    <!--新增报修项目弹出框 start-->
    <el-dialog title="新增/编辑报修项目" class="myRoleDialog" :visible.sync="newEditDialogVisible">
      <div class="mymarginTop_10px">
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            项目名称 :
          </el-col>
          <el-col :span="19">
            <el-input placeholder="项目名称" v-model="subject_name"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            项目编号 :
          </el-col>
          <el-col :span="19">
            <el-input placeholder="项目编号" v-model="subject_code"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            项目价格 :
          </el-col>
          <el-col :span="19">
            <el-input placeholder="项目价格" v-model="price"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            缩略图 :
          </el-col>
          <el-col :span="19">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :data="postData"
              :on-success="handleAvatarSuccess">
              <img v-if="thumbnailUrl" :src="thumbnailUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="5" class="myLeftMsg">
            项目说明 :
          </el-col>
          <el-col :span="19">
            <el-input type="textarea" placeholder="项目说明" v-model="subject_desc"></el-input>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" v-if="isAdd" @click="onAddRepairItem">新增</el-button>
        <el-button type="primary" class="myBgGreen" v-else @click="onUpdateRepairItem">保存</el-button>
      </div>
    </el-dialog>
    <!--新增报修项目弹出框 end-->
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after,.myBorder:before,.myBorder:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myBorder{
    border: 1px solid #bfcbd9;
    width: 182px;
    height: 40px;
  }
  .myNoBorder{
    border:none !important;
  }
  .myWidth_100px{
    width: 100px;
    float: left;
    line-height: 36px;
    padding: 0 10px;
    background: none;
  }
  .myWidth_35px{
    width: 40px;
    color: #000 !important;
    float: left;
    border-left: 1px solid #bfcbd9 !important;
    border-radius: 0 !important;
    text-align: center;
    height: 38px;
    background: none;
  }
  .el-button span{
    color: #000 !important;
  }
  .myWidth_35px:hover{
    background: #f2f2f2;
    cursor: pointer;
  }
  .myLineHeight_45px{
    line-height: 45px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  import { getRepairTypeDetail , getRepairItemList , updateRepair , addRepairItem , getRepairItemDetail , updateRepairItem , deleteRepairItem } from '@/api/affair_setting';
  import { QINIU_API , QINIU_UP_API } from '@/config/baseUrl';
  import { getQNToken } from '@/api/contentMGT';
  export default {
     data(){
      return{
        id:"",
        type:"",
        repair_type_name:"",
        repair_type_code:"",
        repair_type_desc:"",
        subjectList:[],
        newEditDialogVisible:false,
        uploadUrl:QINIU_UP_API,
        thumbnailUrl:"",
        subThumbnailUrl:"",
        postData:{
          token:""
        },
        subject_name:"",
        subject_code:"",
        subject_desc:"",
        price:"",
        isAdd:true,
        subId:"",
        total:null, //总条数  
        page_num: 1, //当前页码
        page_size: 10, //每页显示多少条 
        loading:false 
      }
    },
    components: {
        
    },
    filters: {

    },
    mounted(){
      this.id = this.$route.query.id;
      this.type = this.$route.query.type;
      if(this.type=="update"){
        this.onGetRepairTypeDetail();
        this.onGetRepairItemList();
        this.onGetToken();
      }
    },
    methods:{
      onGetRepairTypeDetail(){//拉取类型详情
        let vm=this;
        getRepairTypeDetail(vm.id).then(response => {
          let res=response.data;
          vm.repair_type_name=res.type_name;
          vm.repair_type_code=res.type_code;
          vm.repair_type_desc=res.type_desc;
          console.log("报修详细ok",res)
        }).catch(error => {
          console.log(error)
        })
      },
      onGetRepairItemList(){//拉取对应报修项
        let vm=this;
        let params={
          page_num: vm.page_num,
          page_size: vm.page_size
        }
        vm.loading=true;
        getRepairItemList(vm.id,params).then(response => {
          let res=response.data;
          vm.total = res.total;
          vm.subjectList=res.rows;
          vm.loading=false;
          console.log("报修项列表",res)
        }).catch(error => {
          vm.loading=false;
          console.log(error)
        })
      },
      onUpdateRepair(){//修改报修类型
        let vm=this;
        if(!vm.repair_type_name || !vm.repair_type_code || !vm.repair_type_desc){
          vm.$message.error("执行失败！请将数据填写完整！");
          return;
        }
        let params={
          type_id:vm.id,
          type_name:vm.repair_type_name,
          type_code:vm.repair_type_code,
          type_desc:vm.repair_type_desc
        }
        updateRepair(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.$router.go(-1);
          console.log("ok",res)
        }).catch(error =>{
          vm.$message.error("执行失败！");
          console.log(error)
        })
      },
      onUpdate(){
        this.onUpdateRepair();
      },
      onClose(){
        this.$router.go(-1);
      },
      onAddRepairItem(){//新增报修项
        let vm=this;
        if(!vm.subject_name || !vm.subject_code){
          vm.$message.error("执行失败！请将数据填写完整！");
          return;
        }
        let params={
          type_id:vm.id,
          subject_name:vm.subject_name,
          subject_code:vm.subject_code,
          subject_desc:vm.subject_desc,
          price:vm.price,
          url:vm.subThumbnailUrl
        }
        addRepairItem(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.newEditDialogVisible=false;
          vm.onGetRepairItemList();
          console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
        })
      },
      handleAvatarSuccess(res, file) {
        this.subThumbnailUrl=res.key;
        this.thumbnailUrl = QINIU_API +res.key;// 
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      onGetToken(){
        let vm=this;
        getQNToken().then(response => {
          let res=response.data.up_token;
          vm.postData.token=res;
        }).catch(error => {
          console.log("失败")
        })
      },
      onAdd(){
        let vm=this;
        vm.isAdd=true;
        vm.subject_name="";
        vm.subject_code="";
        vm.subject_desc="";
        vm.price="";
        vm.thumbnailUrl="";
        vm.newEditDialogVisible = true;
      },
      onOpenUpdateDialog(s_id){
        let vm=this;
        vm.isAdd=false;
        vm.subId=s_id;
        getRepairItemDetail(s_id).then(response =>{
          let res=response.data;
          vm.newEditDialogVisible=true;
          vm.subject_name=res.subject_name;
          vm.subject_code=res.subject_code;
          vm.subject_desc=res.subject_desc
          vm.price=res.price
          vm.thumbnailUrl=res.url
          console.log("报修项详细",res)
        }).catch(error => {
          console.log(error)
        })
      },
      onUpdateRepairItem(){
        let vm=this;
        let params={
          subject_id:vm.subId,
          subject_name:vm.subject_name,
          subject_code:vm.subject_code,
          subject_desc:vm.subject_desc,
          price:vm.price,
          url:vm.thumbnailUrl
        }
        updateRepairItem(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.newEditDialogVisible=false;
          vm.onGetRepairItemList();
          console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          console.log(error)
        })
      },
      onDeleteRepairItem(s_id){
        let vm=this;
        vm.$confirm('您确定要删除这条数据吗？', '提示', {//弹出框
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRepairItem(s_id).then(response => {
            let res=response.data;
            vm.$message.success("执行成功！");
            vm.onGetRepairItemList();
            console.log(res)
          }).catch(error => {
            vm.$message.error("执行失败！");
            console.log(error)
          })
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });
      },
      handleSizeChange(val) {
        this.page_size = val;
        this.onGetRepairItemList();
      },
      
      handleCurrentChange(val) {
        this.page_num = val;
        this.onGetRepairItemList();
      },
      
    }

  }

</script>  



